<script setup>
import VideoShow from './components/VideoShow.vue'
import ImportPalceShow from './components/ImportPalceShow.vue'
import TrendShow from './components/TrendShow.vue'
import MapShow from './components/MapShow.vue'
import SiteCodeShow from './components/SiteCodeShow.vue'
import ReturnShow from './components/ReturnShow.vue'
import PeopleShow from './components/PeopleShow.vue'
import NATest from './components/NATest.vue'
import BaseInfo from './components/BaseInfo.vue'
import { useMapStore } from '@/stores/map'

const mapStore = useMapStore()
</script>

<template>
  <div class="homeBox">
    <div class="contentMap">
      <div :class="['contentLeft', mapStore.isMapFullScreen && 'contentHide']">
        <div class="monitor">
          <VideoShow />
        </div>

        <div class="analysis">
          <div class="charts">
            <ImportPalceShow />
          </div>

          <div class="charts">
            <SiteCodeShow />
          </div>
        </div>

        <div class="analysis">
          <div class="charts">
            <NATest />
          </div>

          <div class="charts">
            <TrendShow />
          </div>
        </div>
      </div>

      <div :class="['contentCenter', mapStore.isMapFullScreen && 'contentHide']">
        <div class="base">
          <BaseInfo />
        </div>
        <div class="view">
          <MapShow class="map" />
        </div>
        <div class="people">
          <PeopleShow />
        </div>
      </div>

      <div :class="['contentRight', mapStore.isMapFullScreen && 'contentHide']">
        <ReturnShow />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.homeBox {
  .contentMap {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;

    .contentHide {
      &.contentLeft {
        transform: translateX(-150%);
      }

      &.contentCenter {
        .base {
          transform: translateY(-150%);
        }

        .view {
          background: none;

          .map {
            opacity: 0;
            animation: ani 0.1s linear forwards;
          }

          @keyframes ani {
            0% {
              position: absolute;
              left: 0;
              top: 0;
            }
            90% {
              position: absolute;
              left: 0;
              top: 0;
              opacity: 0;
            }
            100% {
              position: absolute;
              left: 0;
              top: 0;
              opacity: 1;
            }
          }
        }

        .people {
          transform: translateY(150%);
        }
      }

      &.contentRight {
        transform: translateX(150%);
      }
    }

    .contentLeft {
      height: 100%;
      display: flex;
      flex-direction: column;
      transform: translateX(0);
      transition: all 0.5s linear;

      .monitor {
        width: 700px;
        height: 381px;
      }

      .analysis {
        display: flex;
        margin-top: 12px;

        .charts {
          width: 344px;
          height: 269px;

          &:not(:first-child) {
            margin-left: 12px;
          }
        }
      }
    }

    .contentCenter {
      margin-left: 12px;
      display: flex;
      flex-direction: column;

      .base {
        width: 760px;
        height: 113px;
        transform: translateX(0);
        transition: all 0.5s linear;
      }

      .view {
        margin-top: 12px;
        width: 760px;
        height: 535px;
        background-image: url('@/assets/home/boxbg3.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .map {
          width: 100%;
          height: 100%;
        }
      }

      .people {
        width: 760px;
        height: 269px;
        margin-top: 14px;
        transform: translateY(0);
        transition: all 0.5s linear;
      }
    }

    .contentRight {
      width: 340px;
      height: 100%;
      margin-left: 12px;
      transform: translateX(0);
      transition: all 0.5s linear;
    }
  }
}
</style>
